<template>
  <div class="app-container">
    <el-dialog title="选择用户" :visible.sync="openSelectUser" v-if="openSelectUser" width="70%" append-to-body>
      <el-row :gutter="5">
        <el-col :span="4">
          <el-card>
            <left-tree @reload="reloadHandler"></left-tree>
          </el-card>
        </el-col>
        <el-col :span="20">
          <el-card>
            <!--搜索表单开始-->
            <el-form :inline="true" size="small" :model="page.params">
              <el-form-item>
                <el-input v-model="page.params.userName" placeholder="请输入用户名"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input v-model="page.params.nickName" placeholder="请输入昵称"></el-input>
              </el-form-item>
              <el-form-item>
                <el-select clearable v-model="page.params.status" placeholder="请选择状态">
                  <el-option
                    v-for="item in statusOptions"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="small" @click="search">查询</el-button>
                <el-button type="warning" icon="el-icon-refresh" size="small" @click="page.params={}">重置</el-button>
              </el-form-item>
            </el-form>
            <!--搜索表单结束-->
            <!--用户数据表格开始-->
            <div>
              <el-table
                v-loading="loading"
                :data="dataPage.list"
                border
                stripe
                style="width: 100%"
              >
                <el-table-column prop="userName" label="账号" align="center"></el-table-column>
                <el-table-column prop="nickName" label="昵称" align="center"></el-table-column>
                <el-table-column prop="email" label="邮箱" align="center"></el-table-column>
                <el-table-column prop="phone" label="电话" align="center"></el-table-column>
                <el-table-column prop="leaderName" label="直属领导" align="center"></el-table-column>
                <el-table-column prop="sex" label="性别" align="center">
                  <template slot-scope="{row}">
                    <dict-tag :data-list="sexOptions" :value="row.sex"></dict-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="deptName" label="所在部门" align="center"></el-table-column>
                <el-table-column prop="status" label="状态" align="center">
                  <template slot-scope="{row}">
                    <dict-tag :data-list="statusOptions" :value="row.status"></dict-tag>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                  <template slot-scope="{row}">
                    <el-button type="text" icon="el-icon-check" @click="handleSelect(row)">确定</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pageNumber"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="dataPage.totalCount">
              </el-pagination>
            </div>
            <!--用户数据表格结束-->
          </el-card>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import leftTree from "./left-tree"
import sysUserApi from "@/api/system/sysUser";

export default {
  name: "sys-user-list.vue",
  components: {
    leftTree
  },
  data() {
    return {
      //加载的遮罩
      loading: false,
      //分页的参数
      page: {
        pageNumber: 1,
        pageSize: 10,
        params: {
          userName: undefined,
          nickName: undefined,
          status: undefined,
          deptId: undefined
        }
      },
      //用户的表格数据
      dataPage: {
        list: [],
        totalCount: 0
      },
      //状态字典数据
      statusOptions: [],
      //性别的字典数据
      sexOptions: [],
      //是否打开弹出层
      openSelectUser:false
    }
  },
  created() {
    //加载状态的字典数据
    this.getDataByType("sys_status_type").then(res => {
      this.statusOptions = res.data;
    })
    this.getDataByType("sys_user_sex").then(res => {
      this.sexOptions = res.data;
    })
  },
  methods: {
    initSelectUser(){
      this.openSelectUser=true;
      this.getUserPage();
    },
    //搜索
    search() {
      this.page.pageNumber=1
      this.getUserPage();
    },
    //每页条数发生变化时触发
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getUserPage()
    },
    //页码发生变化时触发
    handleCurrentChange(val) {
      this.page.pageNumber = val;
      this.getUserPage()
    },
    //加载所有的用户数据
    getUserPage() {
      this.loading = true;
      sysUserApi.getByPage(this.page).then(res => {
        this.dataPage.list = res.data.list
        this.dataPage.totalCount = res.data.totalCount
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    //左边的树点击之后传来的数据
    reloadHandler(deptId) {
      this.page.params.deptId = deptId
      this.getUserPage()
    },
    //确定选择
    handleSelect(row){
      this.$emit("select",row)
      this.openSelectUser=false
    }
  }
}
</script>

<style scoped>

</style>
